<template>
    <div class="box">
       <h1>watch监听</h1>
      <p> <input type="text" v-model="name"> </p>
      <p> <input type="text" v-model="age"> </p>
      <p> <input type="text" v-model="skill.eat"> </p>

      <hr>
      <p> <input type="text" v-model="user.play"> </p>
      <p> <input type="text" v-model="user.detail.info"> </p>
    </div>
  </template>
  
  <script>
  import {ref,reactive,watch} from "vue"
  export default {
      setup(){
         //1.通过ref定义响应式数据
         let name = ref("王昭君");
         let age = ref(18);
         let skill = ref({eat:"干饭"});

         //2.数据监听：wacth(被监听的对象,回调函数,配置对象)
         //2.1 ref监听单个数据
         // watch(name,(newVal,oldValue)=>{
         //    console.log(newVal,oldValue); //王昭君1 王昭君
         // })

         //2.2 监听多个数据变化  wacth([第一个值,第二个值],回调函数,配置对象)
         // watch([name,age],(newVal,oldVal)=>{
         //    console.log(newVal,oldVal); //(2) ['王昭君1', '182'] (2) ['王昭君1', 18]
         // })

         //2.3 监听引用数据类型的变化, .value / 深度监听 {deep:true}  新值和旧值都一样
         // watch(skill.value,(newVal,oldValue)=>{
         //    console.log(newVal,oldValue); //Proxy {eat: '干饭233'} Proxy {eat: '干饭233'}
         // })
         // watch(skill,(newVal,oldValue)=>{
         //    console.log(newVal,oldValue); //Proxy {eat: '干饭233'} Proxy {eat: '干饭233'}
         // },{deep:true})


         //--------------reactive--------------------
         let user = reactive({
            play:"games",
            detail:{
               info:"王者荣耀"
            }
         });

         //2.1 监听整个reactive定义的对象数据，新旧值一样，不需要深度监听（常用）
         // watch(user,(newVal,oldVal)=>{
         //    console.log(newVal,oldVal); 
         // })


         //2.2 监听对象中的属性--基本数据类型  新旧值不一样，不需要深度监听
         // watch(()=>user.play,(newVal,oldVal)=>{  
         //    console.log(newVal,oldVal);  //games3 games
         // })

         //2.3 监听对象中的属性--引用数据类型 新旧值一样，需要深度监听
         // watch(()=>user.detail,(newVal,oldVal)=>{  
         //    console.log(newVal,oldVal);  //Proxy {info: '王者荣耀2'} Proxy {info: '王者荣耀2'}
         // },{deep:true})


         //2.4 监听对象中的多个属性,需要深度监听 新旧值不一样
         watch([()=>user.play,()=>user.detail],(newVal,oldVal)=>{  
            console.log(newVal,oldVal);  // ['games1', Proxy] (2) ['games', Proxy]
         },{deep:true})

         return{
            name,
            age,
            skill,
            user
         }
      }
  }
  </script>
  
  <style>
  
  </style>